<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>4.几个注意点</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				几个注意点：
						1.关于组件名:
								一个单词组成：
											第一种写法(首字母小写)：school
											第二种写法(首字母大写，推荐)：School
								多个单词组成：
											第一种写法(kebab-case命名，有些UI组件库这么写)：my-school
											第二种写法(CamelCase命名，推荐)：MySchool
								备注：
										(1).组件名必须要回避HTML中已有的元素名称，
												例如：
													(1).h2会报错
													(2).H2不会报错
										(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

						2.关于组件标签:
									第一种写法：<组件名></组件名> 
									第二种写法：<组件名/>	（这种写法，若不在脚手架里，容易出bug）
		 -->
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			//创建Student组件
			let Student = Vue.extend({
				name:'Student',
				template:`
					<div>
						<h2>学生姓名：{{name}}</h2>	
						<h2>学生年龄：{{age}}</h2>	
					</div>
				`,
				data(){
					return{
						name:'张三',
						age:18
					}
				}
			})

			//创建School组件
			let School = Vue.extend({
				name:'School',
				template:`
					<div>
						<h2>学校名称：{{name}}</h2>	
						<h2>学校地址：{{address}}</h2>	
					</div>
				`,
				data(){
					return{
						name:'尚硅谷',
						address:'宏福科技园'
					}
				}
			})

			//创建App组件
			let App = Vue.extend({
				template:`
					<div>
						<School/>
						<Student/>
					</div>
				`,
				//注册组件，决定着模板中标签怎么写
				components:{School,Student}
			})
			
			//创建vm
			new Vue({
				el:'#demo',
				template:`<App/>`,
				components:{App}
			})
		</script>
	</body>
</html>